<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Theming Pages</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../_assets/js/jqm-docs.js"></script>
	<script src="../../js/"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Theming pages</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			<h2>Page Theming</h2>
			
			<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
			
			<p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code> data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page.</p>
			
			<p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
			
			<div data-role="header">
				<h1>Default Theme</h1>
			</div>
			<div class="ui-bar ui-bar-c">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-icon="gear" data-role="button" data-inline="true">Tools</a>
					<a href="#" data-icon="star" data-role="button" data-inline="true">Like</a>
					<a href="#" data-icon="refresh" data-role="button" data-inline="true">Refresh</a>
				</div><!-- /controlgroup -->
			</div>
			<div class="ui-body ui-body-c">
				<h3>Default Theme Content Header</h3>
				<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
				     <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-z1" id="radio-choice-y1" value="on" checked="checked" />
				         	<label for="radio-choice-y1">On</label>
				         	<input type="radio" name="radio-choice-z1" id="radio-choice-z1" value="off"  />
				         	<label for="radio-choice-z1">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-a">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>

			
			<p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
						
			<h2>Swatch A</h2>
			<div data-role="header" data-position="inline">
				<h1>Header A</h1>
			</div>
			<div class="ui-body ui-body-a">
				<h3>Header</h3>
				<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
				     <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
				         	<label for="radio-choice-a1">On</label>
				         	<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  />
				         	<label for="radio-choice-b1">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-a">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>


			<h2>Swatch B</h2>
			<div data-role="header" data-theme="b">
				<h1>Header B</h1>
			</div>
			<div class="ui-body ui-body-b">
				<h3>Header</h3>
				<p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a2" id="radio-choice-a2" value="on" checked="checked" />
				         	<label for="radio-choice-a2">On</label>
				         	<input type="radio" name="radio-choice-a2" id="radio-choice-b2" value="off"  />
				         	<label for="radio-choice-b2">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-b">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>
			
			<h2>Swatch C</h2>
			<div data-role="header" data-theme="c">
				<h1>Header C</h1>
			</div>
			<div class="ui-body ui-body-c">
				<h3>Header</h3>
				<p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="c" />
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a3" id="radio-choice-a3" value="on" checked="checked" />
				         	<label for="radio-choice-a3">On</label>
				         	<input type="radio" name="radio-choice-a3" id="radio-choice-b3" value="off"  />
				         	<label for="radio-choice-b3">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-c">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>
			
			<h2>Swatch D</h2>
			<div data-role="header" data-theme="d">
				<h1>Header D</h1>
			</div>
			<div class="ui-body ui-body-d">
				<h3>Header</h3>
				<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="d" />
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a4" id="radio-choice-a4" value="on" checked="checked" />
				         	<label for="radio-choice-a4">On</label>
				         	<input type="radio" name="radio-choice-a4" id="radio-choice-b4" value="off"  />
				         	<label for="radio-choice-b4">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-d">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>
			
			<h2>Swatch E</h2>
			<div data-role="header" data-theme="e">
				<h1>Header E</h1>
			</div>
			<div class="ui-body ui-body-e">
				<h3>Header</h3>
				<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
					<label for="slider1">Input slider:</label>
				 	<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="e" />
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     	<legend>Cache settings:</legend>
				         	<input type="radio" name="radio-choice-a5" id="radio-choice-a5" value="on" checked="checked" />
				         	<label for="radio-choice-a5">On</label>
				         	<input type="radio" name="radio-choice-a5" id="radio-choice-b5" value="off"  />
				         	<label for="radio-choice-b5">Off</label>
				    </fieldset>
				<a href="#" data-role="button" data-inline="true">Button</a>
			</div>
			<div class="ui-bar ui-bar-e">
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
				</div><!-- /controlgroup -->
			</div>


				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="docs-pages.html">Anatomy of a page</a></li>
								<li><a href="docs-transitions.html">Page transitions</a></li>
								<li><a href="docs-dialogs.html">Dialogs</a></li>
								<li><a href="docs-navmodel.html">Navigation: Ajax, hashes &amp; history</a></li>
								<li><a href="link-formats.html">Link format examples</a></li>
								<li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2011 Mobile MonArch 7.51</p>
			</div>

			</div><!-- /page -->

			</body>
			</html>